<template>
  <div class="chinesePandemic">
    <el-row class="row">
      <el-col class="echarts_item" :span="8">
        <div id="line_chart"></div>
        <div id="bar_chart"></div>
      </el-col>
      <el-col class="echarts_item" :span="8">
        <div id="province_map"></div>
      </el-col>
      <el-col
        class="echarts_item newsList"
        :span="8"
      >
      <h1 class="tips_title">温馨提示</h1>
      <p class="tips_content">{{tips}}</p>
        <!-- <div class="new_i">
          <el-scrollbar class="news">
            <div class="list_item" v-for="(it, index) in newList" :key="index">
              <div class="title">{{ it.title }}</div>
              <div class="content">{{ it.content }}</div>
              <div class="footer">
                <span>{{ it.ltime }}</span
                >&nbsp;<el-tag type="success" size="mini" effect="dark">
                  {{ it.source }}
                </el-tag>
              </div>
            </div>
          </el-scrollbar>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
// import tools from '@/utils/tools.js'
import {
  ref,
  computed,
  reactive,
  getCurrentInstance,
  onMounted,
  toRaw,
} from "vue";
import { getProvinceData } from "@/api";
import { mapState, useStore } from "vuex";
import { ElMessage } from 'element-plus'
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
let echarts = reactive(globalProperties.$echarts);
let activeProvince = ref("");
let provinceData = null;
let provinceList = [
  "北京市",
  "上海市",
  "重庆市",
  "天津市",
  "黑龙江省",
  "吉林省",
  "辽宁省",
  "河北省",
  "山西省",
  "青海省",
  "山东省",
  "河南省",
  "江苏省",
  "安徽省",
  "浙江省",
  "福建省",
  "江西省",
  "湖南省",
  "湖北省",
  "广东省",
  "台湾省",
  "海南省",
  "甘肃省",
  "陕西省",
  "四川省",
  "贵州省",
  "云南省",
  "内蒙古自治区",
  "新疆维吾尔自治区",
  "西藏自治区",
  "宁夏回族自治区",
  "广西壮族自治区",
];
let allData = [];
let provinceChart = reactive({});
let provinceAsChart = reactive({});
let cityData = [];
let chinaAsData = [];
let newList = [
  {
    title: "内蒙古累计确诊4列,死亡52人",
    content:
      "vue3中的响应对象用 xx.value取值,然后在模板能直接解包 用xx就行那proxy对象呢? 每次都要toRaw()取原始对象吗?vue3中的响应对象用 xx.value取值,然后在模板能直接解包 用xx就行那proxy对象呢? 每次都要toRaw()取原始对象吗",
    id: 1,
    source: "人民网",
    ltime: "2022/02/10",
  },
];
const store = useStore();
const storeProvinceData = computed(() => store.state.provinceData);
// let getProvinceData = (val) => store.dispatch("getProvinceData", val);

let tips = ref("疫情期间请佩戴好口罩，注意个人换护")
onMounted(() => {
  console.log(storeProvinceData,'storeProvinceData')
  let paname = provinceList.find(
    (item) => item.indexOf(storeProvinceData.value.name) > -1
  );
  provinceData = require(`../../assets/json/province/${paname}.json`);
  renderProvince(
    toRaw(storeProvinceData.value.cityData),
    storeProvinceData.value.name
  );
  // console.log(toRaw(storeProvinceData.value.cityData),'gagagag');
  //   getData('china');
  handleCityData(toRaw(storeProvinceData.value.cityData));
  renderProvinceAnalysis();
  getDaysAdd(storeProvinceData.value.adcode)
});
let handleCityData = (data) => {
  cityData = data.map((item) => {
    return {
      name: item.name,
      adcode: item.adcode,
      mtime: item.last_update_time,
      dead: item.total_dead,
      confirm: item.total_confirm,
      heal: item.total_heal,
    };
  });
  //    console.log(cityData,'hwoss');
};
let getDaysAdd = (adcode) => {
  console.log(storeProvinceData.value,'s11toreProvinceData')
    getProvinceData(adcode).then(res => {
    if (res&&res.data) {
      let dayList = storeProvinceData.value.cityData.splice(storeProvinceData.value.cityData.length-10,storeProvinceData.value.cityData.length-1)
      dayList = dayList.map(it =>{return {confirm:it.total_confirm,date: it.last_update_time,dead:it.today_dead,heal:it.today_heal}})
      renderDayAnalysis(dayList)
      let day1 = dayList[dayList.length-1].today_confirm
      let day2 = dayList[dayList.length-2].today_confirm
      let day3 = dayList[dayList.length-3].today_confirm
      if (day1>day2&&day2>9) {
          tips.value = '本省2日疫情小幅度上升,请减少使用公共交通出行'
        if (day2>day3&&day3>15) {
          tips.value = '本省3日疫情大幅上涨,请多囤备防疫物资和生活必需品应对突发管控'
        }
      }
    }
  })
  // getProvinceData(adcode).then(res => {
  //   if (res&&res.data) {
  //     let dayList = res.data.data.list.splice(res.data.data.list.length-10,res.data.data.list.length-1)
  //     dayList = dayList.map(it =>{return {confirm:it.today.confirm,date: it.date,dead:it.today.dead,heal:it.today.heal}})
  //     renderDayAnalysis(dayList)
  //     let day1 = dayList[dayList.length-1].confirm
  //     let day2 = dayList[dayList.length-2].confirm
  //     let day3 = dayList[dayList.length-3].confirm
  //     if (day1>day2&&day2>9) {
  //         tips.value = '本省2日疫情小幅度上升,请减少使用公共交通出行'
  //       if (day2>day3&&day3>15) {
  //         tips.value = '本省3日疫情大幅上涨,请多囤备防疫物资和生活必需品应对突发管控'
  //       }
  //     }
  //   }
  // })
}
let renderDayAnalysis = (data) => {
  let daysChart = echarts.init(document.getElementById("line_chart"), "white");
  let options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["确诊", "治愈", "死亡"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        //   boundaryGap: false,
        data: data.map((it) => it.date),
      },
    ],
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
    },
    series: [
      {
        name: "确诊",
        type: "line",
        stack: 'Total',
        data: data.map((it) => it.confirm),
      },
      {
        name: "治愈",
        type: "line",
        stack: 'Total',
        data: data.map((it) => it.heal),
      },
      {
        name: "死亡",
        type: "line",
        stack: 'Total',
        data: data.map((it) => it.dead),
      },
    ],
  };
  daysChart.setOption(options, true);
  
}
let renderProvinceAnalysis = () => {
  console.log(cityData,cityData.map((it) => it.name).splice(0, 6),'hhhh');
  provinceAsChart = echarts.init(document.getElementById("bar_chart"), "white");
  let options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["确诊", "治愈", "死亡"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        //   boundaryGap: false,
        data: cityData.map((it) => it.name).splice(0, 6),
      },
    ],
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
    },
    series: [
      {
        name: "确诊",
        type: "bar",
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#6CA0F9",
        },
        data: cityData.map((it) => it.confirm).splice(0, 6),
      },
      {
        name: "治愈",
        type: "bar",
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#74ED9C",
        },
        data: cityData.map((it) => it.heal).splice(0, 6),
      },
      {
        name: "死亡",
        type: "bar",
        barWidth: 12,
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#DF9370",
        },
        data: cityData.map((it) => it.dead).splice(0, 6),
      },
    ],
  };
  provinceAsChart.setOption(options, true);
};
let renderProvince = (data, name) => {
  console.log(data,'renderProvincerenderProvince')
  //获取到长度（每个省里有几个市）
  //调用我们通过json对象注册的地图
  echarts.registerMap("provinceMap", provinceData);
  provinceChart = echarts.init(
    document.getElementById("province_map"),
    "white"
  );
  var option = {
    title: {
      text: `\n\n${name}累计确诊分布`,
      left: "top",
      textStyle: {
        fontSize: 16,
        color: "rgba(255, 0, 0, 1)",
      },
    },
    tooltip: {
      //show:true,
      trigger: "item",
    },
    visualMap: {
      //左侧小导航图标
      show: false,
      x: "left",
      y: "bottom",
      textStyle: {
        fontSize: 8,
      },
      splitList: [
        { start: 1, end: 9 },
        { start: 10, end: 99 },
        { start: 100, end: 999 },
        { start: 1000, end: 9999 },
        { start: 10000 },
      ],
      color: ["#2353A7", "#4770B7", "#6F8CCA", "#BBC9E9", "#E8EBF5"],
    },
    series: [
      {
        name: "累计确诊人数",
        type: "map",
        mapType: "provinceMap",
        roam: false, //禁用拖动和缩放

        itemStyle: {
          //图形样式
          normal: {
            borderWidth: 0.3, //区域边框宽度
            borderColor: "#009fe8", //区域边框颜色
            areaColor: "#ffefd5", //区域颜色
          },
          emphasis: {
            //鼠标滑过地图高亮的相关设置
            borderWidth: 0.5,
            borderColor: "#4b0082",
            areaColor: "#fff",
          },
        },
        label: {
          // 图形上的文本标签
          normal: {
            show: true, //省份名称
            fontSize: 10,
          },
          emphasis: {
            show: true,
            fontSize: 8,
          },
        },
        data: [], //[{'name':'上海'，'value':318},{'name':'江苏'，'value':308}]
      },
    ],
  };

  var provinces = data;
  for (var province of provinces) {
    option.series[0].data.push({
      name: province.name,
      adcode: Number(province.adcode),
      value: province.total_confirm,
    });
  }
  provinceChart.setOption(option);
};
</script>
<style lang="scss" scoped>
.chinesePandemic {
  height: 100%;
  .row {
    height: 100%;
    .echarts_item {
      height: 100%;
      .tips_title {
        color: rgb(255, 170, 0);
      }
      .tips_content {
        // color: rgb(255, 0, 132);
        margin-top: 15px;
        font-size: 20px;
      }
      #line_chart {
        height: 50%;
      }
      #bar_chart {
        height: 50%;
      }
      #province_map {
        width: 100%;
        height: 100%;
      }
      .new_i {
        height: 600px;
        .news {
          width: 100%;
          border: 1px solid #000;
          .list_item {
            padding: 7px;
            // border: 1px solid #000;
            border-bottom: 1px solid #000;
            // width: 100%;
            .title {
              font-size: 20px;
              color: rgb(76, 76, 228);
              text-align: left;
              line-height: 20px;
            }
            .content {
              text-align: left;
              padding: 5px 0;
            }
            .footer {
              text-align: right;
            }
          }
        }
      }
    }
    .newsList {
    }
  }
}
</style>
